<template>
	<view class="address-bar">
		<view class="address-item" v-for="item in 4" :key="item">
			<view class="item-l">
				<view class="item-l-bold uni-font-size-lg">
					<view class="item-l-w">张三</view>
					<view>13612345</view>
				</view>
				<view class="uni-font-size-base uni-text-color-grey">广州天河</view>
			</view>
			<navigator url="../add-up-address/add-up-address" class="item-r">
				<icon-bar name="iconbianji" color='#999'></icon-bar>
			</navigator>
		</view>
		
		<view class="address-footer">
			<buttom-bar url="../add-up-address/add-up-address" icon-name="iconjia" width="90%" title="新键收货地址" :height="80" :border="false" background="#1296db" :size="30" color="#fff"></buttom-bar>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'AddressBar',
		title: '地址',
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	@import  "@/uni.scss";
	.address-bar{
		width:100%;
		.address-item{
			width: 100%;
			padding: 20upx 30upx;
			box-sizing: border-box;
			background: $uni-bg-color;
			border-bottom: solid 2upx $uni-border-color;
			display: flex;
			align-items: center;
			.item-l{
				flex: 1;
			}
			.item-r{
				border-left: solid 2upx $uni-border-color;
				padding-left: 20upx;
			}
			.item-l-bold{
				display: flex;
				font-weight: bold;
				margin-bottom: 10upx;
			}
			.item-l-w{
				width: 140upx;
			}
		}
		.address-footer{
			width: 100%;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: center;
		}
	}
</style>
